.datas{
  height: 100%;
  .sib{
    height: 100%;
    float: left;

    #side-bar{
      position: fixed;
      top: 8em;
      left: 0;
      text-align: center;
      width: 21em;
      height: 100%;
    }
  }
}
@media screen and (max-width: 900px){
  $fsz:16px;
  .datas{
    height: 100%;
    .sib{
      height: 100%;
      float: left;

      #side-bar{
        position: fixed;
        top: 14*$fsz;
        left: $fsz;
        text-align: center;
        width: 7*$fsz;
        z-index: 3;
        height: 2*$fsz;
      }
    }
  }
}
@media screen and (max-width: 600px){
  $fsz:16px;
  .datas{
    height: 100%;
    .sib{
      height: 100%;
      float: left;

      #side-bar{
        position: fixed;
        top: 7*$fsz;
        background: #afc19d;
        left: 0;
        text-align: center;
        width: 100%;
        z-index: 3;
        height: 6*$fsz;
      }
    }
  }

}
@media screen and (max-width: 600px)and (min-width: 551px){
  $fsz:16px;
  .datas{
    height: 100%;
    .sib{
      height: 100%;
      float: left;

      #side-bar{
        position: fixed;
        top: 7*$fsz;
        background: #afc19d;
        left: 0;
        text-align: center;
        width: 100%;
        z-index: 3;
        height: 4*$fsz;
      }
    }
  }
}

